<template>
	<div class="comTable">
		<el-table ref='equBrandTable'  :data="tableData" border style="width: 100%;"  @selection-change="handleSelectionChange"
		   
			:header-cell-style="{ background: '#F5F7FA', color: '#606266' }">
			<el-table-column type="selection" width="55" align="center" v-if="showChange">
			</el-table-column>
			<template v-for="column in columns">
				<!-- <el-table-column v-if="column.slot"  align="center"  :label="column.title" :width="column.width" >
					<template slot-scope="scope">
					  <slot
					    :prop="column.prop"
					    :row="scope.row"
					  />
					</template>
				</el-table-column> -->
				<el-table-column :fixed="column.fixed" align="center" :width="column.width" :prop="column.prop" :show-overflow-tooltip="true"
				 :formatter="column.formatter || undefined" :label="column.title" v-if="!column.action">
				 <template slot-scope="scope">
				   <slot
				     v-if="column.slot"
				     :name="column.prop"
					 :prop="column.prop"
				     :row="scope.row"
					 :index="scope.$index"
				   />
				   <span v-else>{{ scope.row[column.prop] }}</span>
				 </template>
				 </el-table-column>
				<el-table-column align="center"  :label="column.title" v-else :width="column.width" >
					<template slot-scope="scope">
						<template v-for="(fn, index) in column.actions">
							<Divider direction="vertical" v-if="index > 0" />
							<el-button type="text" :class="[fn.type]" @click.stop="handleClick(scope.row, fn.fnName)">
								{{fn.title?fn.title:''}}<i class="iconSize" :class="[fn.Icon]" v-show="fn.Icon" style="vertical-align: middle;margin-left:5px;"></i>
			
							</el-button>
						</template>
					</template>
				</el-table-column>
			</template>
		</el-table>
	</div>
</template>
<script>
	import {
		Divider
	} from "element-ui";
	export default {
		name: "tableC",
		components: {
			Divider
		},
		props: {
			height: {
				required: false,
				type: String,
				default: () => {
					return '';
				},
			},
			showChange: {
				required: true,
				type: Boolean,
				default: () => {
					return false;
				},
			},
			columns: {
				required: true,
				type: Array,
				default: () => {
					return [];
				},
			},
			tableData: {
				required: true,
				type: Array,
				default: () => {
					return [];
				},
			},
		},
		methods: {
			handleClick(row, fnName) {
				this.$emit(`${fnName}`, row);
			},
			handleSelectionChange(val) {
				if(this.$parent.handleSelectionChange){
					this.$parent.handleSelectionChange(val)
				}
				else{
					this.$emit('SelectionVal',val);
				}
			},
			loadyout(){
				let self = this
				this.$nextTick(function(){ self.$refs.equBrandTable.doLayout() })
			}
		},
	};
</script>
<style lang="less" scoped>

</style>
